<template>
     <div class="back">
         <div class="box_a"
              :style="{
                  'color': $store.state.nowTime==='moon' ? '#fff' : '#8f8c8c',
                  'background':   $store.state.nowTime==='moon' ? 'rgba(38,37,37,0.9)' : 'rgba(255, 255, 255, 0.9)'
             }">
             <h3>账号注销</h3>
             <label>
                 <input type="text" placeholder="请输入验证码" v-model="users.captcha">
                 <button @click="fetch($event)" class="fetch">获取</button>
             </label>
             <div class="choose">
                 <button @click="submit">确定</button>
                 <button @click="shutDown">取消</button>
             </div>
             <p>温馨提示：验证码将发送至绑定邮箱！</p>
         </div>
     </div>
</template>

<script>
import api from "@/api";

export default {
    name: "AccountCancellation",
    data(){
        return{
            users:{
                captcha:"",
                captchaId:"",
            },
            user:"",
            time: "",
            times: 60,
            index: true,
            pas: false,
            pas_new: "",
        }
    },
    mounted() {
        this.user = JSON.parse(window.localStorage.getItem("user"));

    },
    methods:{
        fetch(e) {
            if(this.user != null){
                api.deleteAutoCaptcha(this.user.email).then((res)=>{
                    this.users.captchaId = res.data.data;
                    console.log(res.data)
                })
            }
            if (this.index) {
                this.index = false;
                this.pas = !this.pas;
                clearInterval(this.time);
                this.time = setInterval(() => {
                    e.target.innerHTML = this.times--;
                    if (this.times === 0) {
                        clearInterval(this.time)
                        e.target.innerHTML = "获取";
                        this.times = 60;
                        this.index = true;
                        this.pas = !this.pas;
                    }
                }, 1000)
            }

        },
        submit(){
            if(this.users.captcha !== "" && this.users.captchaId !== ""){
                api.deleteAuto(this.users).then((res)=>{
                    if(res.data.code === 200){
                        alert("您的账号已注销，如需恢复请于3日内联系客服")
                        window.localStorage.clear()
                        this.$router.push("/login")
                    }
                })
            }else {
                alert("验证码不能为空")
            }

        },
        shutDown(){
            this.$emit("shutDown")
        }
    }
}
</script>

<style scoped>
h3{
    font-weight: bold;
    text-align: center;
    color: #8f8c8c;
    padding: 13px;
}
.back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(143, 140, 140, 0.1);
    z-index: 99999;
}
.choose{
    margin-bottom: 20px;
}
.box_a{
    margin: auto;
    transform: translateY(100%);
    width: 300px;
    height: 200px;
    background: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    border-radius: 3px;
}
input{
    outline: none;
    width: 200px;
    height: 35px;
    margin-bottom: 20px;
    text-indent: 0.5rem;
}
button{
    outline: none;
    border: 0;
    padding: 8px 15px;
    background: #3586f1;
    color: white;
    border-radius: 3px;
    margin: 0 5px;
    cursor: pointer;
}
.fetch{
    margin:0;
    border-radius: 0;
}
button:hover{
    opacity: .8;
}
p{
    font-size: 13px;
    color: #509eec;
}
</style>